<template>
  <div class="wallpaper">
    <img :src="getImageUrl(src)" alt="">
  </div>
</template>

<script lang="ts" setup>
import { useThemeStore } from "@/stores/theme"
import VariableName from "@/stores/theme/variable-name"

const themeStore = useThemeStore()

const src = themeStore.getVariableRef(VariableName.Wallpaper.src)

function getImageUrl(name: string) {
  return new URL(`../../../assets/wallpaper/${name}`, import.meta.url).href
}
</script>

<style scoped lang="scss">
.wallpaper {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;

  img {
    object-fit: cover;
    height: 100%;
    width: 100%;
  }
}
</style>
